/* ====================================================== 
   Tabs        
/* ====================================================== */

.custom-tabs {
	
	
	/*! 
	 ---------------------------
	 Tab Normal Effect
	 ---------------------------
	 */ 
	&:not(.rotation) {
	    @include outer-shadow();
		
		.marker {
			background: $primary-text-color1;
			height: 2px;
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			transition: .1s ease-in-out;
		}	
		
	}
	
	.content {
		
		display: none;
		padding: 1.3125rem;
		text-align: left;
		
		&.active {
			display: block;
		}
	}
	
	.custom-tabs-ul-container {
		> ul {
			> li {
				position: relative;
				display: block;
				transition: .1s ease-in-out;
				list-style: none;
				float: left;
				box-shadow: inset 1px 0px 0px 0px rgba(230, 230, 230, 1);
				background: #f7f7f7;
				min-width: 7.5rem;

				> a {
					position: relative;
					padding: 0.625rem 1rem;
					display: block;
					text-align: center;
				}
				&.active {
					background: #fff;

				}
			}

			&:after {
				content: '';
				display: block;
				clear: both;
			}
		}	
	}

	

	&.custom-tabs-center {
		box-shadow: none;

		.custom-tabs-ul-container {
			
			> ul {
				font-size: 0; /*Fighting the Space Between Inline Block Elements*/
				display: block;
				width: 100%;
				text-align: center;
				/*require*/
				@include outer-shadow();

				li {
					font-size: 1rem;/*Fighting the Space Between Inline Block Elements*/
					display: inline-block;
					/*require*/
					float: none;

				}
			}	
			
		}
		

	}



	/*! 
	 ---------------------------
	 Tab Rotation Effect
	 ---------------------------
	 */ 
	&.rotation {
		
		height: 400px;

		.content {
			position: absolute;
			top: 0;
			left: 400px;
			width: 300px;
			@include outer-shadow();
		}
		.custom-tabs-ul-container {
			width: 300px;
			height: 300px;
			position: relative;
			margin: 0;
			
			> ul {
				position: relative;
				display: block;
				width: 300px;
				height: 300px;

				> li {
					position: absolute;
					width: 80px;
					height: 80px;
					background: none;
					box-shadow: none;
					transition: none;

					> a {
						width: 80px;
						height: 80px;
						line-height: 60px;
						background: #fff;
						border-radius: 100%;
						@include outer-shadow();
					}

					&.active > a {
						background: $primary-text-color1;
						color: #fff;
					}

				}
			}	
			
		}

	}
}



@media all and (max-width: 768px) { 
	.custom-tabs {

		&:not(.rotation) li {
			width: 100% !important;
		}

		/* Tab Rotation Effect */
		&.rotation {

			height: 400px;

			.content {
				position: relative;
				left: 0;
				width: 100%;
			}

			.custom-tabs-ul-container {
				margin-top: 50px;
				margin-left: 120px;
			}
			
		}

		

	}	

}
